<template>
    <div>
        <div v-if="hover" class="block">
            <el-cascader
                    :style="{ width: width + 'px' }"
                    v-model="value"
                    :options="options"
                    :props="{ expandTrigger: 'hover' }"
                    @change="handleChange"></el-cascader>
        </div>
        <div v-else class="block">
            <el-cascader
                    v-model="value"
                    :options="options"
                    @change="handleChange"></el-cascader>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            width: {
              type: String,
              default: () => '400'
            },
            options: {
                type: Array,
                default: () => []
            },
            click: {
                type: Boolean,
                default: () => true
            },
            hover: {
                type: Boolean,
                default: () => false
            },
        },
        data() {
            return {
                value: [],
            };
        },
        methods: {
            handleChange(value) {
                console.log(value);
                this.$emit('change', value)
                this.$emit('input', value)
            }
        }
    };
</script>

<style scoped>

</style>